<template>
    <div class="tableListBox">
      <div class="blueTitleView">
        <p class="titleview">项目商务信息表</p>
      </div>
      <div class="iuapContent">
        <div class="content-form">
          <IuapSearch
            :fromData="fromData"
            @searchFn="
              (e) => {
                this.searchFn(e);
              }
            "
            @reset="
              (e) => {
                this.reset(e);
              }
            "
          >
          </IuapSearch>
        </div>
        <div class="content-form__operation">
          <vxe-button status="primary" size="small" @click="exp">导出</vxe-button>
        </div>
        <div class="tableList">
          <div class="onlyTable">
            <vxe-grid
              class="table-normal"
              ref="table"
              resizable
              show-overflow
              row-key
              keep-source
              border="inner"
              :data="tableData"
              :columns="columns"
              max-height="100%"
            >
              <template #operation="{ row }">
                <vxe-button size="mini" status="info" @click="check(row)">详情</vxe-button>
              </template>
            </vxe-grid>
          </div>
          <vxe-pager
            background
            :current-page.sync="form.page"
            :page-size.sync="form.size"
            :total="total"
            :layouts="['Total', 'Sizes', 'PrevPage', 'JumpNumber', 'NextPage']"
            @page-change="pager"
          >
          </vxe-pager>
        </div>
      </div>
    </div>
  </template>
  <script>
  import keyName from '../../util/keyName';
  import IuapSearch from '/@/components/Iuap/IuapSearch.vue';
  import VXETable from 'vxe-table';
  import * as ExcelJS from 'exceljs';
  export default {
    components: { IuapSearch },
    data() {
      return {
        form: {
          vcode: '',
          vname: '',
          orgName: '',
          page: 1,
          size: 10,
        },
        columns: [
          {
            type: 'seq',
            width: 60,
            title: '序号',
          },
          {
            field: 'projectCode',
            title: '项目编码',
            editRender: {},
          },
          {
            field: 'projectName',
            title: '项目名称',
            editRender: {},
          },
          {
            field: 'orgName',
            title: '所属组织',
            editRender: {},
          },
        //   {
        //     field: 'psnCount',
        //     title: '商务人员数量',
        //     editRender: {},
        //   },
          {
            title: '操作',
            width: 180,
            headerAlign: 'left',
            slots: { default: 'operation' },
          },
        ],
        tableData: [],
        total: 0,
        fromData: [
          {
            name: '项目编码',
            key: 'vcode',
            type: 'input',
            value: '',
          },
          {
            name: '项目名称',
            key: 'vname',
            type: 'input',
            value: '',
          },
          {
            name: '所属组织',
            key: 'orgName',
            type: 'treeSelect',
            value: '',
            treeData: keyName.getTreeData('orgName'),
            defaultProps: { children: 'children', label: 'orgName', id: 'orgName' },
          },
        ],
      };
    },
    created() {
      this.getList();
    },
    methods: {
      async getList() {
        await this.$api.getProjectList(this.form).then((res) => {
          try {
            const { list, total } = res.data;
            this.tableData = list;
            this.total = total;
          } catch {}
        });
      },
      // 用于导出数据
      async getAllList() {
        // VXETable.modal.message({ content: '下载中', status: 'loading' });
        return await this.$api.getProjectList({ page: 1, size: 100000 }).then((res) => {
          try {
            const { list } = res.data;
            return list;
          } catch {}
        });
      },
      pager({ currentPage, pageSize }) {
        this.form.page = currentPage;
        this.form.size = pageSize;
        this.getList();
      },
      search() {
        this.form.page = 1;
        this.getList();
      },
      searchFn(e) {
        console.log(this.fromData);
        this.fromData.forEach((item) => {
          if (item.key == 'orgName') {
            if (item.value) {
              this.form.orgName = item.value;
            } else {
              this.form.orgName = '';
            }
          } else if (item.key == 'vcode') {
            if (item.value) {
              this.form.vcode = item.value;
            } else {
              this.form.vcode = '';
            }
          } else if (item.key == 'vname') {
            if (item.value) {
              this.form.vname = item.value;
            } else {
              this.form.vname = '';
            }
          }
        });
        this.form.page = 1;
        this.getList();
      },
      reset() {
        this.form = {
          vcode: '',
          vname: '',
          orgName: '',
          page: 1,
          size: 10,
        };
        this.getList();
      },
      async exp() {
        const result = await this.getAllList();
        this.$refs.table.exportData({
          filename: '项目商务信息表',
          sheetName: '项目商务信息表',
          type: 'xlsx',
          useStyle: true,
          columnFilterMethod: (column, $columnIndex) => {
            return !(column.$columnIndex === 0 || column.$columnIndex === 5);
          },
          data: result,
        });
      },
      check(row) {
        const { projectCode } = row;
        this.$router.push({
          path: '/projectDetail',
          query: { projectCode },
        });
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  .tableListBox {
    height: 100vh;
    ::v-deep {
      .vxe-form.outForm {
        .vxe-form--item-content {
          width: 280px;
        }
        .vxe-form--item {
          width: 28%;
        }
        .last-item {
          width: 16%;
          text-align: right;
        }
      }
      .vxe-table--body-wrapper {
        overflow-y: auto !important;
      }
      // .vxe-table--main-wrapper {
      //   height: calc(100vh - 70px);
      //   .vxe-table--body-wrapper {
      //     height: calc(100% - 50px);
      //   }
      // }
      .table-normal .vxe-header--row {
        height: 30px;
      }
      .vxe-button.type--button.theme--primary {
        height: 28px;
        font-size: 12px;
        background-color: rgb(31, 143, 255) !important;
      }
      .vxe-button.type--button.size--mini {
        height: 21px;
        line-height: 21px;
        font-size: 12px;
      }
      .vxe-form--item-title-label {
        font-size: 13px;
      }
      // .vxe-form .vxe-form--item .vxe-form--item-inner .vxe-form--item-content .vxe-input {
      //   height: 26px !important;
      //   line-height: 26px !important;
      // }
      .vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
        padding: 0 !important;
        font-size: 13px;
      }
      .vxe-table--render-default .vxe-body--column.col--ellipsis {
        height: 35px;
        font-size: 13px;
      }
      .vxe-button.type--text.theme--info {
        color: #06f;
        cursor: pointer;
        line-height: 1;
      }
      .vxe-button.type--button.size--mini.theme--info:not(.is--disabled) {
        background-color: #505766 !important;
        border-color: #505766 !important;
        // height: 20px;
        border-radius: 2px;
      }
      .vxe-button.type--button.size--small.theme--info:not(.is--disabled) {
        background-color: #505766 !important;
        border-color: #505766 !important;
        // height: 26px;
        border-radius: 2px;
      }
      .vxe-pager--wrapper button.is--active {
        background-color: #adb4bc !important;
        border-color: #adb4bc !important;
        box-shadow: none;
      }
      // .vxe-input {
      //   height: 20px;
      // }
      // .vxe-pager--wrapper button {
        // width: 18px;
        // height: 18px;
        // line-height: 18px;
        // font-size: 12px;
      // }
      // .vxe-pager {
      //   display: flex;
      //   position: absolute;
      //   bottom: 0;
      //   width: 100%;
      //   justify-content: flex-end;
      // }
    }
  }
  </style>
  